<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <title>监控</title>
    <link rel="stylesheet" href="{% static "css/semantic.min.css" %}"></link>
    <link rel="stylesheet" href="{% static "css/icon.min.css" %}"></link>
</head>
<body>
<h2 class="ui header inverted big" style="color:#FFF;background-color:#00b5ad;padding:1em;margin:0;">
    MongooCrawler分布式爬虫系统</h2>
<div class="ui bottom attached segment pushable">
    <div class="ui large secondary vertical pointing menu left dimmed"
         style="width: 13.5%;float:left;height: 100% !important;max-height:  100% !important;">
        <a href="/" class="item text">
            首页
        </a>
        <a href="/clients" class="item text">
            客户端
        </a>
        <a href="/business" class="active item">
            <i class="ui icon user"></i>
            业务
        </a>
    </div>
    <div class="pusher" style="width:86%;">
        <div class="ui large breadcrumb" style="margin-left:2em;margin-top:1em;">
            <a class="section">主页</a>
            <i class="right chevron icon divider"></i>
            <a class="section">业务</a>
            <i class="right chevron icon divider"></i>
            <a class="section">地图</a>
        </div>
        <div class="ui divider"></div>
        <div class="ui buttons">
            <button class="ui primary button" id="prevPage"><i
                    class="marker icon"></i>上一页
            </button>
            <button class="ui primary button" id="nextPage"><i
                    class="marker icon"></i>下一页
            </button>
        </div>
        <div id="container" style="width:100%;height:auto;min-height:800px;">
        </div>
    </div>
</div>
<script type="text/javascript"
        src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4eHBhgj0y0XmeeGUFtrmcLMTa5SQ4yp5"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script src="{% static 'js/semantic.min.js' %}"></script>
<script type="text/javascript">
    var dataSize = 0;

    function turnToPage(map, markers, page) {
        $.ajax({
            url: "/business/lianjia_json?page=" + page,
            dataType: "json",
            success: function (result) {
                // 初始化地图，设置中心点坐标和地图级别
                var len = result.data.length;
                dataSize += len;
                var pt = null;
                var i;
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                for (i = 0; i < len; i++) {
                    var marker;
                    var house = result.data[i]
                    // 将地址解析结果显示在地图上，并调整地图视野
                    myGeo.getPoint(house.address, function (point) {
                        if (point) {
                            marker = new BMap.Marker(point);
                            //map.addOverlay(marker);
                            markers.push(marker);
                        }
                        if (markers.length >= dataSize) {
                            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
                            var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
                        }
                    }, "成都市");
                }
                if (result.pager) {
                    var pager = result.pager;
                    if (pager.next_page && pager.cur_page != pager.next_page) {
                        turnToPage(map, markers, pager.next_page);
                    }
                }
            }
        });
    }

    $(function () {
        var map = new BMap.Map("container");
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());
        // 创建地图实例
        var point = new BMap.Point(104.072188, 30.663527);
        // 创建点坐标
        map.centerAndZoom(point, 15);
        var markers = [];
        turnToPage(map, markers, 1);
    });
</script>
</body>
</html>